<template>
  <el-card shadow="hover" class="card">
    <div class="title">
      <div class="name">{{ data.app_name }}</div>
      <el-icon
        :size="24"
        color="#e6a23c"
        v-if="data.collect"
        @click.stop="handleCollect(data)"
      >
        <StarFilled class="start" />
      </el-icon>
      <el-icon
        :size="24"
        color="#c0c4cc"
        v-else
        @click.stop="handleCollect(data)"
      >
        <StarFilled class="start" />
      </el-icon>
    </div>
    <p class="info desc">系统简介：{{ data.app_desc }}</p>
    <p class="info">负责人：{{ userName(data.app_productor_id) }}</p>
  </el-card>
</template>

<script setup>
import { computed } from 'vue';
import useUserStore from '@/store/modules/user';
import { getNavigateCollect, deleteNavigateCollect } from '@/api/navList';
const userStore = useUserStore();
const userName = id => {
  return userStore.getUserById(id);
};

const props = defineProps(['data', 'loading']);
const emit = defineEmits(['update:loading', 'updateData']);

const data = computed({
  get: () => props.data
});
const handleCollect = data => {
  const params = {
    id: data.id
  };
  emit('update:loading', true);
  // // 取消收藏
  if (data.collect) {
    deleteNavigateCollect(params)
      .then(() => {
        emit('updateData');
      })
      .finally(() => {});
  } else {
    //收藏
    getNavigateCollect(params)
      .then(() => {
        emit('updateData');
      })
      .finally(() => {});
  }
};
</script>

<style lang="scss" scoped>
.card {
  height: 140px;
  margin-bottom: 18px;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .start {
    cursor: pointer;
  }

  .name {
    color: #008080;
    flex: 1;
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
.info {
  font-size: 12px;
  color: #909399;
}
.desc {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
